<script>
    // 类别模态表单页
    Vue.component('category-form', {
        template: `
<el-dialog :visible.sync="dialogShow" width="800px" @close="closeModal">
   <h3 slot="title">
        <span v-if="categoryForm.id">编辑分类</span>
        <span v-else>新增分类</span>
    </h3>
   <el-form ref="form" :rules="categoryRules" :model="categoryForm" label-width="80px">
        <el-form-item v-if="categoryForm.id" class="hidden">
        <el-input v-model="categoryForm.id" disabled></el-input>
        </el-form-item>
        <el-form-item label="类别名称" prop="title" required>
        <el-input autocomplete="off" v-model="categoryForm.title" clearable style="width: 260px;"></el-input>
        </el-form-item>
        <el-form-item label="上级分类" prop="pid">
        <el-select  placeholder="选择上级分类" v-model="category_one" clearable @change="setChildren">
            <el-option
                  v-for="item in categoryListForType"
                 :key="item.id"
                 :label="item.title"
                 :value="item.id">
            </el-option>
        </el-select>
        <el-select  placeholder="选择上级分类" v-model="category_two"  clearable>
            <el-option
                  v-for="item in cate_children"
                 :key="item.id"
                 :label="item.title"
                 :value="item.id">
            </el-option>
        </el-select>
        </el-form-item>
        <el-form-item label="收支类型">
        <span>{{ categoryType == 1 ? "收入" : "支出"}}</span>
        </el-form-item>
   </el-form>
   <div slot="footer" class="dialog-footer">
        <el-button @click="closeModal">取 消</el-button>
        <el-button type="primary" @click="handleCategoryForm">确 定</el-button>
  </div>
</el-dialog>
    `,
    props: ['dialog-show','form-row','category-list-for-type','category-type'],
    computed: {
        currentTallyId() {
            return this.$store.state.currentTallyId
        },
        currentTally () {
            return this.$store.state.currentTally
        }
    },
    watch: {
        dialogShow:{
            handler (newVal) {

            },
            deep:true,
            immediate: true
        },
        formRow: {
            handler (newVal) {
                if(newVal.id !== undefined){
                    if(newVal.pid !== 0){
                        let dataIds = [];
                        let pid = newVal.pid;
                        for (let i=0;i<this.categoryListForType.length;i++){
                            let item = this.categoryListForType[i];
                            if(item['children'] !== undefined){
                                for (let a = 0;a<item['children'].length;a++){
                                    let itemV = item['children'][a];
                                    if(itemV['id'] === pid){
                                        dataIds.push(pid) ;
                                        pid = itemV['pid'];
                                        this.cate_children = item['children'];
                                        break;
                                    }
                                }
                            }
                            if(item['id'] === pid){
                                dataIds.push(pid);
                                break;
                            }
                        }

                        if(dataIds.length === 1){
                            this.category_one = pid;
                        }
                        console.log(dataIds)
                        if(dataIds.length === 2){
                            this.category_one = dataIds[1];
                            this.category_two = dataIds[0];
                        }
                    }else{
                        this.category_one = 0;
                    }

                }

                this.categoryForm = newVal
            },
            deep:true,
            immediate: true
        }
    },
    data:function(){
        return {
            category_one:'',
            category_two:'',
            cate_children:[],
            categoryForm: {},
            categoryRules:{
                title: [
                    { required: true, message: '请输入类别名称', trigger: 'blur' }
                ],
            },
        }
    },
    methods:{
        setChildren(){
            this.category_two = ''
            for (var i = 0;i<this.categoryListForType.length;i++){
                if(this.categoryListForType[i]['id'] === this.category_one){
                    this.cate_children = this.categoryListForType[i]['children'];
                    break;
                }
                console.log(this.cate_children)
            }
        },
        closeModal(){
            this.$emit('modalClose')
        },
        handleCategoryForm(){
            let that = this
            let postUrl;
            if(that.categoryForm.id) {
                postUrl = '/api/category/edit'
            }else{
                postUrl = '/api/category/add'
            }
            that.categoryForm['tally_id'] = that.currentTallyId
            that.categoryForm['type'] = that.categoryType
            that.categoryForm['pid'] = that.category_one;
            if(that.category_two !== ''){
                that.categoryForm['pid'] = that.category_two;
            }


            if(that.categoryForm['pid'] === ''){
                that.categoryForm['pid'] = 0;
            }


            axios.post(postUrl,that.categoryForm,{
                headers: {'token': loginToken},
            }).then(function(res) {
                if(res.data.status === 'success'){
                    that.category_one = ''
                    that.category_two = ''
                    that.cate_children = ''
                    that.$message({
                        type: 'success',
                        message: '数据保存成功'
                    });
                    that.$store.dispatch('getCategoryListBase', {
                        tallyId: that.currentTallyId,
                        cateType: that.categoryType
                    })
                    that.$emit('modalClose')
                }else{
                    that.$message({
                        type: 'error',
                        message: '解析数据失败:'+res.data.error_message
                    })
                }
            })
        },
    }
})
</script>
<style>

</style>
